<template>
  <div >
    <div class="model" v-if="isModel"></div>
    <div class="modelBox" v-if="changeModel">
      <div class="modalContent">
        <p class="contentTip">请输入评论内容</p>
        <textarea rows="3" cols="20" v-model="message">
        </textarea>
      </div>
      <div class="modalFooter">
        <div class="btnCancel" @tap="tapCancel">取消</div>
        <div class="btnConfirm" @tap="confirmSend">提交</div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "modelBox",
    data(){
      return {
        changeModel: false,
        isModel: false,
        message: '',
      }
    },
    methods:{
      init(){
        this.tapSendTele()
      },
      // 打开输入手机号的模态框
      tapSendTele(){
        this.changeModel = !this.changeModel;
        this.isModel = !this.isModel;
      },
      confirmSend(){
        console.log(this.phoneNumber)
      },
      //  弹框取消
      tapCancel(){
        this.phoneNumber = '';
        this.changeModel = !this.changeModel;
        this.isModel = !this.isModel;
      },

    }
  }
</script>

<style scoped>
  .model{
    position: fixed;
    top:0;
    bottom:0;
    left:0;
    right: 0;
    background: rgba(0,0,0,.5);
    z-index: 199;

  }
  .modelBox{
    width: 500rpx;
    height: 300rpx;
    background: #fff;
    border-radius: 20rpx;
    z-index: 200;
    position: absolute;
    top:50%;
    left:50%;
    translate:-250rpx -150rpx;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-content:space-around;
  }
  .modelBox .modalFooter {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    height: 100rpx;
    border-top: 1px solid #E5E5E5;
    font-size:28rpx;
    line-height: 100rpx;
  }
  .teleStyle{
    width: 80%;
    margin:0 auto;
    background: #FFFFFF;
    border: 1px solid #979797;
    border-radius: 6px;
    box-sizing: border-box;
    padding-left: 12rpx;
    font-size: 28rpx;
    /*color: rgba(0,0,0,0.25);*/
    margin-top: 30rpx;
  }
  .modalContent{
    width: 100%;
    text-align: center;
    font-size: 28rpx;
  }
  .modelBox .btnCancel {
    width: 50%;
    font-size: 28rpx;
    color: #333;
    text-align: center;
    border-right: 1px solid #E5E5E5;
  }
  .modelBox .btnConfirm {
    font-size: 28rpx;
    width: 50%;
    color: #508CEE;
    text-align: center;
  }
  .contentTip{
    text-align: center;
  }
</style>
